<!DOCTYPE HTML>
<html>
<head>
	<title>bootstrap-lightbox Test Suite</title>

	<!-- jquery -->
	<!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>-->
	<script src="vendor/jquery.js"></script>

	<!-- Twitter Bootstrap -->
	<link rel="stylesheet" type="text/css" href="vendor/bootstrap.min.css">
	<script src="vendor/bootstrap.js"></script>

	<!--  plugin sources -->
	<script src="../bootstrap-lightbox.js"></script>

	<!-- less -->
	<link rel="stylesheet/less" type="text/css" href="../../less/bootstrap-lightbox.less" />
	<script src="vendor/less.min.js"></script>

</head>
<body>
	<p><a data-toggle="lightbox" href="#demoLightbox1">Small Lightbox</a></p>
	<p><a data-toggle="lightbox" href="#demoLightbox2">Medium Lightbox</a></p>
	<p><a data-toggle="lightbox" href="#demoLightbox3">Large Lightbox</a></p>
	<p><a data-toggle="lightbox" href="#demoLightbox4">Huge Lightbox</a></p>
	<p><a data-toggle="lightbox" href="#demoLightbox5">Huge - Wide Lightbox</a></p>

	<div id="demoLightbox1" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
		<div class="lightbox-dialog">
			<div class='lightbox-header'>
				<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
			</div>
			<div class="lightbox-content">
				<img src=''>
				<div class='lightbox-caption'>
					Hola senior
				</div>
			</div>
		</div>
	</div>

	<div id="demoLightbox2" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
		<div class="lightbox-dialog">
		<div class='lightbox-header'>
				<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
			</div>
		<div class="lightbox-content">
			<img src=''>
			<div class='lightbox-caption'>
					Hola senior
				</div>
		</div>
		</div>
	</div>

	<div id="demoLightbox3" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
		<div class="lightbox-dialog">
		<div class='lightbox-header'>
				<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
			</div>
			<div class="lightbox-content">
			<img src=''>
			<div class='lightbox-caption'>
					Hola senior
				</div>
		</div>
		</div>
	</div>

	<div id="demoLightbox4" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
		<div class="lightbox-dialog">
<div class='lightbox-header'>
				<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
			</div>
		<div class="lightbox-content">
			<img src=''>
			<div class='lightbox-caption'>
					Hola senior
				</div>
		</div>
		</div>
	</div>

	<div id="demoLightbox5" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
		<div class="lightbox-dialog">
<div class='lightbox-header'>
				<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
			</div>
		<div class="lightbox-content">
			<img src=''>
			<div class='lightbox-caption'>
					Hola senior
				</div>
		</div>
		</div>
	</div>
	<script type="text/javascript">
	$(document).ready(function()
	{
		$("div.lightbox").bind("shown",function()
		{
			console.log("Shown Event",$(this).attr('id'));
		});
	});
	</script>
</body>
</html>